<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Positioning定位</title>
    <style>

        body{

            background-color: beige;

        }
        p.fix1{

            width: 100px;
            height: 50px;
            background-color: red;
            font-size: 15px;
            position: fixed;
            top: 50px;
            right: 50px;

        }

        p.fillx{

            width: 200px;
            height: 50px;
            margin-top: 40px;
            margin-bottom: 40px;

        }

        h3.pos_left{

            position: relative;
            left: -20px;
        }
        h3.pos_right{

            position: relative;
            left: 20px;

        }
        h3.pos_top{

            width: 150px;
            height: 50px;
            position: relative;
            left: 40px;
            top: 30px;
            background-color: orange;

        }

        h3.ab_top{

            left: 100px;
            top: 200px;
            position: absolute;
        }


    </style>


</head>
<body>


<h2>static</h2>
<p>HTML的默认定位，即没有定位，出现在正常的流中。</p>
<p>静态定位的元素不会受到top，bottom，left,right影响</p>

<hr>


<h2>fix定位</h2>

<p class="fix1">右上角Fix</p>
<p style="color: red"><b>注意：</b>元素的位置相对于浏览器的窗口是固定位置，即使窗口滚动它也不会移动</p>
<hr>


<h2>relative定位1</h2>

<h3>正常的h3标题</h3>
<h3 class="pos_left">偏左的的h3标题</h3>
<h3 class="pos_right">偏右的的h3标题</h3>

<p style="color: red"><b>注意：</b>相当于margin-left</p>
<hr>
<h2>relative定位2</h2>
<h3 class="pos_top">靠在左上角的relative定位</h3>
<p style="color: red"><b>注意：</b>相当于margin,相对于临近元素的位置,会遮挡临近元素</p>
<hr>


<h2>absolute定位</h2>

    <p>绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有定位的父元素,那么他的位置相对于html页面</p>

    <h3 class="ab_top">用绝对定位放在距离左边100px距离上边200px</h3>

<hr>






</div>class="fillx">sometext</p><p class="fillx">sometext</p><p class="fillx">sometext</p><p class="fillx">sometext</p><p class="fillx">sometext</p><p class="fillx">sometext</p>v
<p class="fillx">sometext</p><p class="fillx">sometext</p><p class="fillx">sometext</p><p class="fillx">sometext</p><p class="fillx">sometext</p><p class="fillx">sometext</p><p class="fillx">sometext</p>
<p class="fillx">sometext</p><p class="fillx">sometext</p><p class="fillx">sometext</p><p class="fillx">sometext</p><p class="fillx">sometext</p><p class="fillx">sometext</p>











</body>
</html>